<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .box{
            width:170px;
            height:170px;
            background: darkcyan;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <parent></parent>  

    </div>

    <template id="parent">
        <div>
            <h2 ref="one">I am parent 父组件 - 1</h2>
            <h2>word -- {{word}}</h2>
            <h2 @click="count++">count -- {{count}}</h2>
            <p>
                <input type="text" v-model="word">
            </p>
            <button @click="show=!show">切换{{show?'显示':'隐藏'}}</button>
            <button @click="changeChildOne">通过refs 去操作子组件1</button>
            <hr>
            <childone
                :word="word"
                :count  = "count"
                ref="child1"
            ></childone>
            <hr>
            <childtwo :show="show" ref="child2" > </childtwo>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>childone - 1 - 子组件 </h2>
            <h2 >props --- {{word}} - {{count}}</h2>
            <h2>num --- {{num}}</h2>
        </div>
    </template>

    <template id="childtwo">
        <div>
            <h2>childtwo - 2 - 子组件  </h2>
            <div v-if="show" class="box">我是被父组件控制的</div>
        </div>
    </template>

    <script>
        Vue.component("myhead",{
            template:"<h2>wh2114 - 天天大声背面试题目 </h2>"
        }),
        Vue.component("parent",{
            template:"#parent",
            data(){
                return {
                    word:"Are you Ok?",
                    count:1000,
                    show:true 
                }
            },
            mounted(){
                this.$refs.one.style.color = "red"
            },
            methods:{
                changeChildOne(){
                    this.$refs.child1.num+=20;
                    this.$refs.child1.greet()
                }
            },
            components:{
                childtwo:{
                    template:"#childtwo",
                    props:{
                        show:Boolean 
                    }
                }
            }
        })
        Vue.component("childone",{
            template:"#childone",
            props:[
                "word",
                'count'
            ],
            methods:{
                greet(){
                    console.log("greeting - 周末去哪里玩...")
                }
            },
            data(){
                return {
                    num:2000
                }
            }
        })
        
        const vm = new Vue({
            data:{
                title:"Vue component 组件通讯(父子 兄弟)",
            },
            components:{
                first:{
                    template:"<h2>First - vue 组件初始化 </h2>"
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")


    </script>
    <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        
        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs   指向这个子组件对象    
        c. 事件总线 (bus new Vue)
        d. events 事件   (emit on )
        e. vuex (最后一天) 

        2. 子组件访问父组件
        
        3. 兄弟组件之间的通信


        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
     -->
</body>
</html>